<template>
    <div 
    class="title-parent"
    :class="{'group-start': data.groupStart, expand: data.expand}"
    @click.stop="parentClickHandler"
    >
        <div 
        v-if="data.imgurl"
        class="icon"
        :style="{backgroundImage: `url(${data.imgurl1})`}"
        >
            <img 
                :src="data.imgurl" 
                :alt="data.title"
            />
        </div>

        <div class="text">
            <template v-if="!searchShowChontroller">
                {{data.title}}
            </template>

            <slot 
                v-if="searchShowChontroller"
                ref="search"
                name="search"
                :hide="hideSearch"
            ></slot>
        </div>

        <div 
        v-if="data.search && !searchShowChontroller"
        class="search"
        >
            <i 
                class="el-icon-search" 
                @click.stop="showSearch"
            ></i>
        </div>

        <div 
        v-if="data.children && data.children.length"
        class="arrow"
        >
            <i class="el-icon-arrow-up"></i>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({
                // title 名称
                // imgurl 图标
                // imgurl1 激活状态下图标
                // expand 展开
                // search 使用搜索
                // children: [
                //     {
                //         title 名称
                //         imgurl tubiao 
                //         link 链接地址
                //         content: [
                //             name 名称
                //             describe 描述
                //             linkurl 链接地址
                //             imgurl 图片
                //         ]
                //     }
                // ]
            }),
        },
    },
    data() {
        return {
            searchShowChontroller: false,
        };
    },
    methods: {
        /**
         * 父导航项被点击
         */
        parentClickHandler() {
            var {link, children} = this.data;

            if (children) {
                this.data.expand = !this.data.expand;
                // 父级导航点击
                return;
            }

            if (!link) {

                return;
            }

            this.setCzc(['导航栏', '点击', this.data.title, 0, `home-nav-parentToggle-${this.data.title}`]);

            this.goto(link);
        },

        showSearch() {
            this.searchShowChontroller = true;

            this.setCzc(['导航栏', '点击', `${this.data.title}搜索`, 0, `home-nav-search-${this.data.title}`]);
        },
        hideSearch() {
            this.searchShowChontroller = false;
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

    .title-parent {
        display: flex;
        align-items: center;
        padding: 8px 0;
        padding-left: 12px;
        cursor: pointer;
        font-weight: bold;
        color: #2b2b2b;

        .icon{
            margin-right: 6px;

            img{
                display: block;
                width: 21px;
                height: 21px;
            }
        }

        .text{
            flex: 1;
            font-size: 15px;
            line-height: 1em;

            .search-input{
                height: 20px;

                ::v-deep{
                    .el-input__inner{
                        height: 20px;
                        line-height: 20px;
                        padding: 0 5px;
                    }

                    .el-input__suffix{
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        .search{
            display: flex;
            align-items: center;
        }

        .arrow{
            display: flex;
            align-items: center;
            padding: 0 6px;
            transition: all .3s;
        }

        &:hover, &.active{
            background: $primaryColor;
            color: white;

            .icon{
                img{
                    opacity: 0;
                }
            }
        }

        &.expand{
            .arrow{
                transform: rotate(180deg);
            }
        }

        &.group-start{
            margin-top: 24px;
        }
    }
</style>